<style>
.sitesBox .siteWrap .badge {
    font-size: 15px;
    border-radius: 50%;
    margin: 0 0 0 6px;
    padding: 0;
    height: 16px;
    width: 16px;
    line-height: 13px;
}
</style>

<template>
    <div class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button @click="hideModal"
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title">网址配置{{title}}</h4>
                </div>
                <div class="modal-body sitesBox">
                    <div class="form-group">
                        <input @input="search"
                               type="text"
                               class="form-control"
                               placeholder="点此搜索网址库，点击添加">
                    </div>
                    <div class="siteWrap">
                        <template v-for="site in siteList">
                            <span @click="addSite"
                                  :id="site.id"
                                  class="btn btn-default btn-sm">{{site.name}}</span>
                        </template>
                    </div>
                    <div class="siteWrap">
                        <template v-for="site in USERSITES"
                                  track-by="id">
                            <span @click="deleteSite"
                                  :id="site.id"
                                  class="btn btn-success btn-sm">{{site.name}}<span class="badge">×</span></span>
                        </template>
                    </div>
                    <div v-if="isvip"
                         class="well well-sm submitSiteWrap">
                        <div><span>上面没有想要的网站? 那就帮我添加网址入库吧!</span></div>
                        <div><span class="error"
                                  :class="errorClass">{{error}}</span></div>
                        <div class="form-inline row">
                            <div class="form-group col-md-4">
                                <input @change="search"
                                       v-model="siteName"
                                       type="text"
                                       class="form-control"
                                       placeholder="网站名"
                                       required="required">
                            </div>
                            <div class="form-group col-md-4">
                                <input @change="search"
                                       v-model="siteUrl"
                                       type="text"
                                       class="form-control"
                                       placeholder="网址"
                                       required="required">
                            </div>
                            <div class="form-group col-md-4">
                                <input v-model="siteIcon"
                                       type="text"
                                       class="form-control"
                                       placeholder="图标">
                            </div>
                        </div>
                        <div class="form-inline row addSiteLineTwo">
                            <div class="checkbox col-md-4">
                                <label>
                                    <input @change="changIsfocus"
                                           v-model="siteIssecret"
                                           type="checkbox"
                                           id="isSecret"> 是否公开网址
                                </label>
                            </div>
                            <div class="checkbox col-md-4">
                                <label>
                                    <input @change="changIsfocus"
                                           v-model="siteIsfocus"
                                           type="checkbox"
                                           id="isDefFocus"> 是否默认高亮
                                </label>
                            </div>
                            <div class="checkbox col-md-4">
                                <select v-model="siteCategory"
                                        class="col-md-4">
                                    <option value="">请选择合适的分类</option>
                                    <option value="sj">社交</option>
                                    <option value="gw">购物</option>
                                    <option value="xw">新闻</option>
                                    <option value="sp">视频</option>
                                    <option value="yy">音乐</option>
                                    <option value="zp">招聘</option>
                                    <option value="yx">邮箱</option>
                                    <option value="js">技术</option>
                                    <option value="ty">体育</option>
                                    <option value="rj">软件</option>
                                    <option value="sh">生活</option>
                                    <option value="game">游戏</option>
                                    <option value="qt">其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-inline row addSiteLineTwo">
                            <div class="submitSiteBtn col-md-4">
                                <button @click="addUserSite"
                                        type="submit"
                                        class="btn btn-default btn-block">提交入库</button>
                            </div>
                        </div>
                    </div>
    
                </div>
                <div class="modal-footer">
                    <button @click="hideModal"
                            type="button"
                            class="btn btn-primary">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Cookie from 'js-cookie';
import api from '../api';

export default {
    created() {
        this.init();
    },
    props: [
        'type',
        'title'
    ],
    data: () => ({
        userSitesId: [],
        siteList: [],
        siteName: '',
        siteUrl: '',
        siteIcon: '',
        siteCategory: '',
        siteIssecret: false,
        siteIsfocus: false,
        error: ''
    }),
    computed: {
        ...mapGetters([
            'isvip',
            'USERSITES'
        ]),
        errorClass() {
            return {
                'text-danger': this.error && this.error != '提交成功',
                'text-success': this.error == '提交成功',
            }
        }
    },
    methods: {
        init() {
            let _length = this.USERSITES.length;
            for (let i = 0; i < _length; i++) {
                this.userSitesId.push(this.USERSITES[i].id);
            }
        },
        search(e) {
            let val = e.target.value;
            api.searchSites((res) => {
                if (res) {
                    this.siteList = res;
                }
            }, {
                    value: val
                });
        },
        hideModal() {
            this.$emit('closeSiteConfig');
        },
        addSite(e) {
            let siteId = parseInt(e.target.id);
            let _userSites = this.USERSITES;
            //设置用户网址配置
            if (this.userSitesId.indexOf(siteId) != -1) {
                return;
            }
            this.userSitesId.push(siteId);
            //设置页面当前页面用户已添加网址
            for (let i = 0; i < this.siteList.length; i++) {
                if (this.siteList[i].id == siteId) {

                    _userSites.push(this.siteList[i]);
                    this.siteList.splice(i, 1);
                }
            }
            //上传用户配置
            this.$store.commit('updateParam', {
                key: ['USERSITES'],
                value: [_userSites]
            });

            if (Cookie.get('usr_id')) {
                api.editSites((res) => { }, {
                    sites: this.userSitesId.join(','),
                    __CSRF__: Cookie.get('__CSRF__')
                });
            }
            Cookie.set('usr_sites', this.userSitesId.join(','), { expires: 366, path: '/' });
        },
        deleteSite(e) {
            let siteId = parseInt(e.target.id || e.target.parentNode.id);
            let _userSites = this.USERSITES;
            let index = this.userSitesId.indexOf(siteId);
            //设置用户网址配置
            if (index != -1) {
                this.userSitesId.splice(index, 1);
            }
            //设置页面当前页面用户已添加网址
            for (let i = 0; i < _userSites.length; i++) {
                if (_userSites[i].id == siteId) {
                    this.siteList.push(_userSites[i]);
                    _userSites.splice(i, 1);
                }
            }
            //上传用户配置
            this.$store.commit('updateParam', {
                key: ['USERSITES'],
                value: [_userSites]
            });

            if (Cookie.get('usr_id')) {
                api.editSites((res) => { }, {
                    sites: this.userSitesId.join(','),
                    __CSRF__: Cookie.get('__CSRF__')
                });
            }
            Cookie.set('usr_sites', this.userSitesId.join(','), { expires: 366, path: '/' });
        },
        changIsfocus() {
            if (this.siteIsfocus && this.siteIssecret == false) {
                this.siteIssecret = true;
                this.error = '只有非公开网址可以设置默认高亮';
            } else if (this.error == '只有非公开网址可以设置默认高亮') {
                this.error = '';
            }
        },
        addUserSite() {
            let urlReg = /.+\.[a-zA-Z]{2,10}/;
            let iconReg = /.+\.[a-zA-Z]+\/[a-zA-Z]+(.png|.jpg|.gif|.ico)$/;
            if (!this.siteName) {
                return this.error = '请输入网站名';
            }
            if (!this.siteUrl || !urlReg.test(this.siteUrl)) {
                return this.error = '请输入合法的网址, 格式: http://www.xxx.com 或 www.xxx.com';
            }
            if (this.siteIcon && !iconReg.test(this.siteIcon)) {
                return this.error = '图标地址格式错误, 请以.png/.jpg/.gif/.ico结尾, 也可留空';
            }
            if (!this.siteCategory) {
                return this.error = '请选择合适的网址分类';
            }

            this.error = '';

            api.addUserSite(res => {
                if (res.errno == 0) {
                    return this.error = '提交成功';
                } else if (res.errno == 1104) {
                    return this.error = '该网址已存在, 您可以直接添加';
                } else {
                    return this.error = res.errmsg;
                }
            }, {
                    name: this.siteName,
                    url: this.siteUrl,
                    icon: this.siteIcon,
                    category: this.siteCategory,
                    secret: this.siteIssecret,
                    isfocus: this.siteIsfocus,
                    __CSRF__: Cookie.get('__CSRF__')
                });
        }
    }
}
</script>